<template>
  <div class="app-container">
    <el-card shadow="never" style="margin-top: 15px">
      <div class="operate-container">
        <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
        <span class="color-danger">
        当前订单状态：<span v-html="order.statusName"></span>
        </span>
        <div class="operate-button-container" v-show="order._status === 1">
          <el-button size="mini" @click="handleSelectSales">选择购买者</el-button>
          <el-button
            size="mini"
            :loading="loading"
            type="primary"
            @click="emitOrder(order)"
            >提交订单</el-button
          >
        </div>
        <div class="operate-button-container" v-show="order._status === 2">
          <el-button
            size="mini"
            :loading="loading"
            type="primary"
            @click="emitOrder(order)"
            >提交订单</el-button
          >
        </div>
             <div class="operate-button-container" v-show="order._status === 3">
        </div>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">基本信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="4" class="table-cell-title">订单编号</el-col>
          <el-col :span="4" class="table-cell-title">发货单流水号</el-col>
          <el-col :span="4" class="table-cell-title">用户账号</el-col>
          <el-col :span="4" class="table-cell-title">支付方式</el-col>
          <el-col :span="4" class="table-cell-title">配送方式</el-col>
          <el-col :span="4" class="table-cell-title">物流单号</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="table-cell">{{
            order.orderId == null ? "暂无" : order.orderId
          }}</el-col>
          <el-col :span="4" class="table-cell">暂无</el-col>
          <el-col :span="4" class="table-cell">{{ userDTO.nickname }}</el-col>
          <el-col :span="4" class="table-cell">{{
            order.payType | formatPayType
          }}</el-col>
          <el-col :span="4" class="table-cell">{{
            order.shippingType | formatShippingType
          }}</el-col>
          <el-col :span="4" class="table-cell">{{
            order.deliverySn | formatNull
          }}</el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">收货人信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="4" class="table-cell-title">用户昵称</el-col>
          <el-col :span="4" class="table-cell-title">收货人</el-col>
          <el-col :span="4" class="table-cell-title">手机号码</el-col>
          <el-col :span="4" class="table-cell-title">收货地址</el-col>
          <el-col :span="4" class="table-cell-title">用户备注</el-col>
          <el-col :span="4" class="table-cell-title">管理员备注</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="table-cell">{{ userDTO.nickname }}</el-col>
          <el-col :span="4" class="table-cell">{{ order.realName }}</el-col>
          <el-col :span="4" class="table-cell">{{ order.userPhone }}</el-col>
          <el-col :span="4" class="table-cell">
            <el-popover
              placement="top-start"
              title="收货地址"
              width="300"
              trigger="hover"
              :content="order.userAddress"
            >
              <span slot="reference">{{
                order.userAddress | formatLongText
              }}</span>
            </el-popover>
          </el-col>
          <el-col :span="4" class="table-cell">
            <el-popover
              placement="top-start"
              title="用户备注"
              width="300"
              trigger="hover"
              :content="order.mark"
            >
              <span slot="reference">{{ order.mark | formatLongText }}</span>
            </el-popover>
          </el-col>
          <el-col :span="4" class="table-cell">
            <el-popover
              placement="top-start"
              title="管理员备注"
              width="200"
              trigger="hover"
              :content="order.remark"
            >
              <span slot="reference">{{ order.remark | formatLongText }}</span>
            </el-popover>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">商品信息</span>
      </div>
      <el-table
        :data="order.products"
        size="small"
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column label="商品图片" width="150" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.image" style="height: 80px" />
          </template>
        </el-table-column>
        <el-table-column label="商品名称" width="300" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.storeName }}</p>
          </template>
        </el-table-column>
        <el-table-column label="价格/货号" width="240" align="center">
          <template slot-scope="scope">
            <p>价格：￥{{ scope.row.price }}</p>
            <p>货号：{{ scope.row.barCode }}</p>
          </template>
        </el-table-column>
        <el-table-column label="属性" width="240" align="center">
          <template slot-scope="scope">
            {{ scope.row.sku }}
          </template>
        </el-table-column>
        <el-table-column label="数量" width="180" align="center">
          <template slot-scope="scope">
            {{ scope.row.num }}
          </template>
        </el-table-column>
        <el-table-column label="小计" align="center">
          <template slot-scope="scope">
            ￥{{ scope.row.price * scope.row.num }}
          </template>
        </el-table-column>
      </el-table>
      <div style="float: right; margin: 20px">
        合计：<span class="color-danger">￥{{ order.payPrice }}</span>
      </div>
      <div style="margin-top: 60px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">费用信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="6" class="table-cell-title">商品合计</el-col>
          <el-col :span="6" class="table-cell-title">运费</el-col>
          <el-col :span="6" class="table-cell-title">订单总金额</el-col>
          <el-col :span="6" class="table-cell-title">应付款金额</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">￥{{ order.totalPrice }}</el-col>
          <el-col :span="6" class="table-cell">￥{{ order.payPostage }}</el-col>
          <el-col :span="6" class="table-cell">
            <span class="color-danger">￥{{ order.totalPrice }}</span>
          </el-col>
          <el-col :span="6" class="table-cell">
            <span class="color-danger">￥{{ order.payPrice }}</span>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <EmitSale ref="salePeople" :is-add="isAdd" @doSubmit="doSubmit" />
  </div>
</template>
<script>
import EmitSale from "./emitSale";
import { sumitOrder } from "@/api/yxStoreProduct";
export default {
  components: { EmitSale },
  data() {
    return {
      isAdd: false,
      id: null,
      loading: false,
      order: {},
      user: {},
      userDTO: {},
    };
  },
  filters: {
    formatNull(value) {
      if (value === undefined || value === null || value === "") {
        return "暂无";
      } else {
        return value;
      }
    },
    formatLongText(value) {
      if (value === undefined || value === null || value === "") {
        return "暂无";
      } else if (value.length > 8) {
        return value.substr(0, 8) + "...";
      } else {
        return value;
      }
    },
    formatSourceType(value) {
      if (value === 1) {
        return "小程序";
      } else {
        return "公众号/H5";
      }
    },
    formatShippingType(value) {
      if (value === 1) {
        return "快递";
      } else {
        return "门店自提";
      }
    },
    formatPayType(value) {
      if (value === 1) {
        return "积分支付";
      } else {
        return "余额支付";
      }
    },
    formatAddress(order) {
      let str = order.receiverProvince;
      if (order.receiverCity != null) {
        str += "  " + order.receiverCity;
      }
      str += "  " + order.receiverRegion;
      str += "  " + order.receiverDetailAddress;
      return str;
    },
    formatStatus(value) {
      if (value === 1) {
        return "待发货";
      } else if (value === 2) {
        return "已发货";
      } else if (value === 3) {
        return "已完成";
      } else if (value === 4) {
        return "已关闭";
      } else if (value === 5) {
        return "无效订单";
      } else {
        return "待付款";
      }
    },
    formatPayStatus(value) {
      if (value === 0) {
        return "未支付";
      } else if (value === 4) {
        return "已退款";
      } else {
        return "已支付";
      }
    },
    formatDeliverStatus(value) {
      if (value === 0 || value === 1) {
        return "未发货";
      } else {
        return "已发货";
      }
    },
    formatProductAttr(value) {
      if (value == null) {
        return "";
      } else {
        let attr = JSON.parse(value);
        let result = "";
        for (let i = 0; i < attr.length; i++) {
          result += attr[i].key;
          result += ":";
          result += attr[i].value;
          result += ";";
        }
        return result;
      }
    },
  },
  methods: {
    doSubmit(val) {
      if (undefined == val) {
        this.$message({
          showClose: true,
          message: "请重新选择",
          type: "warning",
        });
      }
      this.order.uid = val.uid;
      this.order.saleCode=val.saleCode
      this.order.realName = val.realName;
      this.order.userPhone = val.phone;
      this.order.userAddress = val.addres;
      this.userDTO.nickname = val.nickname;
    },
    emitOrder() {
      this.loading = true;
      // console.log(this.order)
      if (this.order.uid === undefined) {
        this.$message({
          showClose: true,
          message: "请选择购买者",
          type: "warning",
        });
        this.loading = false;
        return;
      }
      this.order.cost = this.order.totalPrice;
      sumitOrder(this.order)
        .then((resp) => {
          this.$nextTick(() => {
            this.$emit("submitFail", 0);
          });
          this.isAdd = false;
          this.loading = false;
        })
        .catch((error) => {
          this.loading = false;
        });
    },
    handleSelectSales() {
      this.isAdd = true;
      const _this = this.$refs.salePeople;
      _this.dialog = true;
      // alert("跳转对话框,选择消费码")
    },
  },
};
</script>
    <style scoped>
.detail-container {
  width: 80%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}

.operate-container {
  background: #f2f6fc;
  height: 80px;
  margin: -20px -20px 0;
  line-height: 80px;
}

.operate-button-container {
  float: right;
  margin-right: 20px;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  background: #f2f6fc;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
</style>

